<template>
  <a-modal
    :width="500"
    :visible="visible"
    title="随机范围"
    @ok="handleOk"
    @cancel="handleClose"
    :maskClosable="false"
    :keyboard="false"
    centered
  >
    <div class="form_con">
      <a-space direction="vertical" class="form_item">
        <div class="form_title">热门音乐分类：</div>
        <a-select
          v-model:value="selectValue"
          mode="multiple"
          style="width: 100%"
          placeholder="请选择"
          :max-tag-text-length="100"
          :options="
            tagList.map((item) => ({
              ...item,
              value: item.name,
              label: item.name,
            }))
          "
        ></a-select>
      </a-space>
    </div>
  </a-modal>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    tagList: {
      type: Array,
      default: [],
    },
    selectTag: {
      type: Array,
      default: [],
    },
  },

  components: {},

  setup(props, context) {
    const state = reactive({
      selectValue: props.selectTag.map((i) => i.name),
    });

    const handleOk = () => {
      context.emit(
        "submit",
        // props.tagList.filter((it) => state.selectValue.includes(it.id))
        props.tagList.filter((it) => state.selectValue.includes(it.name))
      );
    };

    const handleClose = () => {
      state.selectValue = [];
      context.emit("close");
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          state.selectValue = props.selectTag.map((i) => i.name);
        }
      }
    );

    return {
      ...toRefs(state),
      handleOk,
      handleClose,
    };
  },
});
</script>

<style lang="less" scoped>
.form_con {
  .form_item {
    width: 100%;
    margin-bottom: 20px;

    .form_title {
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>
